﻿<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="../../assets/css/user/login.css">
    <link rel="stylesheet" href="../../assets/css/user/sign-up-login.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/user/font-awesome.min.css">
    <link rel="stylesheet" href="../../assets/css/user/inputEffect.css" />
    <link rel="stylesheet" href="../../assets/css/user/tooltips.css" />
    <link rel="stylesheet" href="../../assets/css/user/spop.min.css" />
    <script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>
    <script src="../../assets/js/plugins/user/jquery.pure.tooltips.js"></script>
    <script src="../../assets/js/plugins/user/spop.min.js"></script>
<!--    <script src="../../assets/js/user/user.js"></script>-->
    <script src="../../assets/js/vendor/axios.min.js"></script>
    <script src="../../assets/js/plugins/utils.js"></script>

    <script>
        (function () {

            if (!String.prototype.trim) {
                (function () {

                    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                    String.prototype.trim = function () {
                        return this.replace(rtrim, '');
                    };
                })();
            }

            [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {

                if (inputEl.value.trim() !== '') {
                    classie.add(inputEl.parentNode, 'input--filled');
                }


                inputEl.addEventListener('focus', onInputFocus);
                inputEl.addEventListener('blur', onInputBlur);
            });

            function onInputFocus(ev) {
                classie.add(ev.target.parentNode, 'input--filled');
            }

            function onInputBlur(ev) {
                if (ev.target.value.trim() === '') {
                    classie.remove(ev.target.parentNode, 'input--filled');
                }
            }
        })();

        $(function () {
            $('#login #login-password').focus(function () {
                $('.login-owl').addClass('password');
            }).blur(function () {
                $('.login-owl').removeClass('password');
            });
            $('#login #register-password').focus(function () {
                $('.register-owl').addClass('password');
            }).blur(function () {
                $('.register-owl').removeClass('password');
            });
            $('#login #register-repassword').focus(function () {
                $('.register-owl').addClass('password');
            }).blur(function () {
                $('.register-owl').removeClass('password');
            });
            $('#login #forget-password').focus(function () {
                $('.forget-owl').addClass('password');
            }).blur(function () {
                $('.forget-owl').removeClass('password');
            });
        });

        function goto_register() {
            $("#register-username").val("");
            $("#register-password").val("");
            $("#register-repassword").val("");
            $("#register-code").val("");
            $("#tab-2").prop("checked", true);
        }

        function goto_login() {
            $("#login-username").val("");
            $("#login-password").val("");
            $("#tab-1").prop("checked", true);
        }

        function goto_forget() {
            $("#forget-username").val("");
            $("#forget-password").val("");
            $("#forget-code").val("");
            $("#tab-3").prop("checked", true);
        }

        function login() {
            var username = $("#login-username").val(),
                password = $("#login-password").val(),
                validatecode = null,
                flag = false;
            /*判断用户名密码是否为空*/
            if (username == "") {
                $.pt({
                    target: $("#login-username"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "用户名不能为空"
                });
                flag = true;
            }
            if (password == "") {
                $.pt({
                    target: $("#login-password"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "密码不能为空"
                });
                flag = true;
            }
            /*用户名只能是15位以下的字母或数字*/
            var regExp = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
            if (!regExp.test(username)) {
                $.pt({
                    target: $("#login-username"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "用户名必须是邮箱格式"
                });
                flag = true;
            }

            if (flag) {
                return false;
            } else {
                /*调用后台登录验证的方法*/
                axios({
                    url: "/user/login",
                    method: "post",
                    data: {
                        "email": username,
                        "password": password
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code==200){
                        let token = response.data.data.token;
                        let nickname = response.data.data.nickname;
                        handleLocalStorage("set", "token", token);
                        handleLocalStorage("set", "nickname", nickname);
                        window.location.href = "/";
                    }else {
                        alert(response.data.message);
                    }
                }).catch(function (error) {
                    alert("服务器异常！");
                });
                return false;
            }
        }

        /*注册*/
        function register() {
            var username = $("#register-username").val(),
                email=$("#register-email").val(),
                password = $("#register-password").val(),
                repassword = $("#register-repassword").val(),
                flag = false;
            /*判断用户名密码是否为空*/
            if (username == "") {
                $.pt({
                    target: $("#register-username"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "昵称不能为空"
                });
                flag = true;
            }else {
                axios({
                    url: "/user/check",
                    method: "post",
                    data: {
                        "nickname": username,
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code !== 10) {
                        $.pt({
                            target: $("#register-username"),
                            position: 'r',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content: response.data.message
                        });
                        flag = true;
                    }else {
                        flag=false;
                    }
                }).catch(function (error) {
                    alert("服务器异常！");
                });

            }
            if (email == "") {
                $.pt({
                    target: $("#register-email"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "邮箱不能为空"
                });
                flag = true;
            }
            /*用户名只能是15位以下的字母或数字*/
            var regExp = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
            if (!regExp.test(email)) {
                $.pt({
                    target: $("#register-email"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "邮箱格式不正确"
                });
                flag = true;
            }else {
                axios({
                    url: "/user/check",
                    method: "post",
                    data: {
                        "email": email,
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code !== 8) {
                        $.pt({
                            target: $("#register-email"),
                            position: 'r',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content: response.data.message
                        });
                        flag = true;
                    }else {
                        flag=false;
                    }
                }).catch(function (error) {
                        alert("服务器异常！");
                    });
            }
            if (password == "") {
                $.pt({
                    target: $("#register-password"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "密码不能为空"
                });
                flag = true;
            } else {
                if (password != repassword) {
                    $.pt({
                        target: $("#register-repassword"),
                        position: 'r',
                        align: 't',
                        width: 'auto',
                        height: 'auto',
                        content: "两次输入的密码不一致"
                    });
                    flag = true;
                }
            }
            if (flag) {
                return false;
            } else {
                axios({
                    url: "/user/register",
                    method: "post",
                    data: {
                        "nickname": username,
                        "email": email,
                        "password": password,
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code === 6) {
                        spop({
                            template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
                            position: 'top-center',
                            style: 'success',
                            autoclose: 3000,
                            onOpen: function () {
                                var second = 2;
                                var showPop = setInterval(function () {
                                    if (second == 0) {
                                        clearInterval(showPop);
                                    }
                                    $('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于' + second + '秒后返回登录');
                                    second--;
                                }, 1000);
                            },
                            onClose: function () {
                                goto_login();
                            }
                        });
                    } else {
                        $.pt({
                            target: $("#register-username"),
                            position: 'r',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content: response.data.message
                        });
                        // alert()
                    }
                }).catch(function (error) {
                    alert("服务器异常！");
                });
                return false;
            }
        }
        function send() {
            var email = $("#forget-email").val(),
            flag = false;
            if (email == "") {
                $.pt({
                    target: $("#forget-email"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "邮箱不能为空"
                });
                flag = true;
            }else {
                axios({
                    url: "/user/check",
                    method: "post",
                    data: {
                        "email": email,
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code == 8) {
                        $.pt({
                            target: $("#forget-email"),
                            position: 'r',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content: "邮箱未注册"
                        });
                        flag = true;
                    }else {
                    flag=false
                    }
                }).catch(function (error) {
                    alert("服务器异常！");
                });
            }
            if (flag) {
                return false;
            } else {
                axios({
                    url: "/user/send/"+email,
                    method: "get",
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response){

                }).catch(function (error) {
                    alert("服务器异常！");
                });
            }
        }

        /*重置密码*/
        function forget() {
            var email = $("#forget-email").val(),
                password = $("#forget-password").val(),
                code = $("#forget-code").val(),
                flag = false;
            /*判断用户名密码是否为空*/
            if (email == "") {
                $.pt({
                    target: $("#forget-email"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "邮箱不能为空"
                });
                flag = true;
            }else {
                axios({
                    url: "/user/check",
                    method: "post",
                    data: {
                        "email": email,
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code == 8) {
                        $.pt({
                            target: $("#forget-email"),
                            position: 'r',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content: "邮箱未注册"
                        });
                        flag = true;
                    }else {
                        flag=false;
                    }
                }).catch(function (error) {
                    alert("服务器异常！");
                });

            }
            if (password == "") {
                $.pt({
                    target: $("#forget-password"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "密码不能为空"
                });
                flag = true;
            }
            /*用户名只能是15位以下的字母或数字*/
            var regExp = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
            if (!regExp.test(email)) {
                $.pt({
                    target: $("#forget-email"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content: "邮箱格式不正确"
                });
                flag = true;
            }
            if (flag) {
                return false;
            } else {/*重置密码*/
                axios({
                    url: "/user/find",
                    method: "post",
                    data: {
                        "email": email,
                        "password":password,
                        "code":parseInt(code)
                    },
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (response) {
                    if (response.data.code == 200) {
                        spop({
                            template: '<h4 class="spop-title">重置密码成功</h4>即将于3秒后返回登录',
                            position: 'top-center',
                            style: 'success',
                            autoclose: 3000,
                            onOpen: function () {
                                var second = 2;
                                var showPop = setInterval(function () {
                                    if (second == 0) {
                                        clearInterval(showPop);
                                    }
                                    $('.spop-body').html('<h4 class="spop-title">重置密码成功</h4>即将于' + second + '秒后返回登录');
                                    second--;
                                }, 1000);
                            },
                            onClose: function () {
                                goto_login();
                            }
                        });
                    }else {
                        $.pt({
                            target: $("#forget-email"),
                            position: 'r',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content: response.data.message
                        });
                    }

                }).catch(function (error) {
                    alert("服务器异常！");
                });
                return false;
            }
        }
    </script>
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        body {
            background-repeat: no-repeat;
            background-position: center center #2D0F0F;
            background-color: #00BDDC;
            /*//background-image: url(images/snow.jpg);*/
            background-size: 100% 100%;
        }

        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100001;
        }
    </style>
</head>
<body>
    <div id="login">
        <input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
        <input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
        <input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
        <div class="wrapper">
            <!-- 登录页面 -->
            <div class="login sign-in-htm">
                <form class="container offset1 loginform">
                    <div class="pad input-container">
                        <section class="content">
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="text" id="login-username"
                                       autocomplete="off" placeholder="请输入邮箱" tabindex="1" maxlength="30" />
                                <label class="input__label input__label--hideo" for="login-username">
                                    <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15" />
                                <label class="input__label input__label--hideo" for="login-password">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                        </section>
                    </div>
                    <div class="form-actions">
                        <a tabindex="4" class="btn pull-left btn-link text-muted" onclick="goto_forget()">忘记密码?</a>
                        <a tabindex="5" class="btn btn-link text-muted" onclick="goto_register()">注册</a>
                        <input class="btn btn-primary" type="button" tabindex="3" onclick="login()" value="登录"
                               style="color:white;" />
                    </div>
                </form>
            </div>
            <!-- 忘记密码页面 -->
            <div class="login sign-out-htm">
                <form action="#" method="post" class="container offset1 loginform">
                    <div class="pad input-container">
                        <section class="content">
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="text" id="forget-email" autocomplete="off" placeholder="请输入邮箱" />
                                <label class="input__label input__label--hideo" for="forget-email">
                                    <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <input class="btn btn-primary" type="button" onclick="send()" value="发送验证码"
                                   style="color:white;" />
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="text" id="forget-code" autocomplete="off" placeholder="请输入验证码" />
                                <label class="input__label input__label--hideo" for="forget-code">
                                    <i class="fa fa-fw fa-wifi icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="password" id="forget-password" placeholder="请重置密码" />
                                <label class="input__label input__label--hideo" for="forget-password">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                        </section>
                    </div>
                    <div class="form-actions">
                        <a class="btn pull-left btn-link text-muted" onclick="goto_login()">返回登录</a>
                        <input class="btn btn-primary" type="button" onclick="forget()" value="重置密码"
                               style="color:white;" />
                    </div>
                </form>
            </div>
            <!-- 注册页面 -->
            <div class="login sign-up-htm">
                <form action="#" method="post" class="container offset1 loginform">
                    <div class="pad input-container">
                        <section class="content">
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="text" id="register-username"
                                       autocomplete="off" placeholder="请输入用户昵称" maxlength="30" />
                                <label class="input__label input__label--hideo" for="register-username">
                                    <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="text" id="register-email"
                                       autocomplete="off" placeholder="请输入邮箱" maxlength="30" />
                                <label class="input__label input__label--hideo" for="register-email">
                                    <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="password" id="register-password" placeholder="请输入密码" maxlength="15" />
                                <label class="input__label input__label--hideo" for="register-password">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input class="input__field input__field--hideo" type="password" id="register-repassword" placeholder="请输入密码" maxlength="15" />
                                <label class="input__label input__label--hideo" for="register-repassword">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                        </section>
                    </div>
                    <div class="form-actions">
                        <a class="btn pull-left btn-link text-muted" onclick="goto_login()">返回登录</a>
                        <input class="btn btn-primary" type="button" onclick="register()" value="注册"
                               style="color:white;" />
                    </div>
                </form>
            </div>
        </div>
    </div>
   
</body>
</html>
